@import '../../App.scss';
.top_nav {
  height: 70px;
  background: #242424;
  display: flex;
  color: #ccc;
  .top_nav_center {
    display: flex;
    width: 1100px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    .top_left {
      display: flex;
      height: 100%;
      .head_logo {
        @include size(176px, 70px);
        display: block;
        background: url('../../static/topbar.png');
      }
      ul {
        display: flex;
        list-style: none;
        font-size: 14px;
        margin: 0;
        li {
          @include size(94px, 70px);
          position: relative;
          .nav_link {
            @include flexCenter();
            height: 100%;
            color: #ccc;
            z-index: 1;
          }
          .nav_act {
            background-color: #000;
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              z-index: 2;
              left: 0;
              right: 0;
              margin: auto;
              @include size(7px);
              border: 7px solid transparent;
              border-bottom-color: #C20C0C;
            }
          }
        }
        li:hover {
          background-color: #000;
        }
      }
    }
    .top_right {
      display: flex;
      align-items: center;
      .ant-input{
        &::placeholder {
          font-size: 12px;
          line-height: 20px;
        }
      }
      .search {
        @include size(158px, 32px);
        border-radius: 32px;
        font-size: 12px;
      }
      .creator_center {
        @include size(90px, 32px);
        font-size: 12px;
        color: #eee;
        border: 1px solid #4F4F4F;
        border-radius: 32px;
        margin-left: 19px;
        @include flexCenter();
      }
      .login {
        color: #787878;
        font-size: 12px;
        margin-left: 20px;
        white-space: nowrap;
      }
    }
  }
}
